<template>
  <view class="container">
    <!-- 顶部标题栏 -->
    <view class="header">
      <text class="header-title">帖子</text>
      <view class="header-actions">
        <view class="search-btn" @tap="showSearch">
          <text class="search-icon">🔍</text>
        </view>
      </view>
    </view>

    <!-- 分类标签 -->
    <view class="category-tabs">
      <scroll-view scroll-x="true" show-scrollbar="false" class="tabs-scroll">
        <view class="tabs-container">
          <view 
            v-for="(category, index) in categories" 
            :key="index"
            class="tab-item"
            :class="{ active: currentCategory === category.id }"
            @tap="switchCategory(category.id)"
          >
            <text class="tab-text">{{ category.name }}</text>
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 帖子列表 -->
    <scroll-view 
      scroll-y="true" 
      class="posts-scroll"
      @scrolltolower="loadMorePosts"
    >
      <view class="post-list">
        <view 
          v-for="(post, index) in filteredPosts" 
          :key="post.id"
          class="post-item" 
          @tap="navigateToPost(post.id)"
        >
          <view class="post-avatar">
            <image class="avatar-image" :src="post.avatar" mode="aspectFill"></image>
            <view class="post-header">
              <text class="post-author">{{ post.author }}</text>
              <view class="post-tag">
                <text class="tag-text">{{ post.school }}</text>
              </view>
            </view>
          </view>
          <view class="post-content">
            <text class="post-text">{{ post.content }}</text>
            <image v-if="post.image" class="post-image" :src="post.image" mode="aspectFill"></image>
            <view class="post-footer">
              <text class="post-time">{{ post.time }}</text>
              <view class="post-actions">
                <view class="action-item" @tap.stop="toggleLike(post)">
                  <image src="/static/home/zan.png" class="like-icon" mode="aspectFill"></image>
                  <text class="action-count">{{ post.likes }}</text>
                </view>
                <view class="action-item" @tap.stop="showComments(post)">
                  <image src="/static/home/pinglun.png" class="comment-icon" mode="aspectFill"></image>
                  <text class="action-count">{{ post.comments }}</text>
                </view>
                <view class="action-item" @tap.stop="sharePost(post)">
                  <image src="/static/home/yanjing.png" class="share-icon" mode="aspectFill"></image>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 加载更多 -->
      <view class="loading-more" v-if="isLoading">
        <text class="loading-text">加载中...</text>
      </view>
      
      <!-- 没有更多 -->
      <view class="no-more" v-if="noMoreData">
        <text class="no-more-text">没有更多内容了</text>
      </view>
    </scroll-view>

    <!-- 底部导航 -->
    <BottomNav current-page="posts" />
  </view>
</template>

<script>
import BottomNav from '../../components/BottomNav.vue'

export default {
  components: {
    BottomNav
  },
  data() {
    return {
      currentCategory: 'all',
      categories: [
        { id: 'all', name: '全部' },
        { id: 'study', name: '学习' },
        { id: 'life', name: '生活' },
        { id: 'job', name: '求职' },
        { id: 'activity', name: '活动' },
        { id: 'rent', name: '租房' },
        { id: 'sale', name: '闲置' }
      ],
      posts: [
        {
          id: 1,
          category: 'life',
          author: '谢小盛',
          school: 'University of Waterloo',
          avatar: '/static/home/av.png',
          content: '苍穹之上，雄鹰是不朽的王者，它身披黑褐色羽衣，羽翼舒展时似巨大的风帆，划破流云，身姿矫健而威严。',
          image: '/static/home/a1.png',
          time: '10/21',
          likes: 70,
          comments: 48
        },
        {
          id: 2,
          category: 'study',
          author: '韩春',
          school: 'University of Waterloo',
          avatar: '/static/home/av.png',
          content: '今天的算法课真的太难了，有没有一起组队刷题的小伙伴？我们可以互相讨论，共同进步！',
          image: '',
          time: '2025/10/20 12:24',
          likes: 45,
          comments: 23
        },
        {
          id: 3,
          category: 'job',
          author: '李明',
          school: 'University of Toronto',
          avatar: '/static/home/av.png',
          content: '分享一下最近的求职经验，投了50多份简历，终于收到了Google的面试邀请！坚持就是胜利！',
          image: '/static/home/a1.png',
          time: '10/19',
          likes: 120,
          comments: 67
        },
        {
          id: 4,
          category: 'activity',
          author: '张雨',
          school: 'McMaster University',
          avatar: '/static/home/av.png',
          content: '这个周末有个hiking活动，想去看枫叶的朋友们一起来吧！秋天的加拿大真的太美了。',
          image: '/static/home/a1.png',
          time: '10/18',
          likes: 89,
          comments: 34
        }
      ],
      isLoading: false,
      noMoreData: false
    }
  },
  computed: {
    filteredPosts() {
      if (this.currentCategory === 'all') {
        return this.posts;
      }
      return this.posts.filter(post => post.category === this.currentCategory);
    }
  },
  onLoad() {
    uni.setNavigationBarTitle({
      title: '帖子'
    });
  },
  methods: {
    switchCategory(categoryId) {
      this.currentCategory = categoryId;
    },
    showSearch() {
      console.log('打开搜索');
      // 可以导航到搜索页面或显示搜索框
    },
    navigateToPost(postId) {
      console.log('Navigate to post:', postId);
      // 导航到帖子详情页
    },
    toggleLike(post) {
      post.likes++;
      console.log('Like post:', post.id);
    },
    showComments(post) {
      console.log('Show comments for post:', post.id);
    },
    sharePost(post) {
      console.log('Share post:', post.id);
    },
    loadMorePosts() {
      if (this.isLoading || this.noMoreData) return;
      
      this.isLoading = true;
      
      // 模拟加载更多数据
      setTimeout(() => {
        // 这里可以添加更多帖子数据
        this.isLoading = false;
        this.noMoreData = true; // 示例中设置没有更多数据
      }, 1000);
    }
  }
}
</script>

<style scoped>
.container {
  min-height: 100vh;
  background: #f8f9fa;
  padding-bottom: 120rpx;
}

/* 头部 */
.header {
  height: 88rpx;
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.header-actions {
  display: flex;
  align-items: center;
}

.search-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
}

.search-icon {
  font-size: 28rpx;
}

/* 分类标签 */
.category-tabs {
  background: #fff;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.tabs-scroll {
  width: 100%;
}

.tabs-container {
  display: flex;
  padding: 0 30rpx;
  white-space: nowrap;
}

.tab-item {
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  background: #f5f5f5;
  border-radius: 20rpx;
  flex-shrink: 0;
}

.tab-item.active {
  background: #007aff;
}

.tab-text {
  font-size: 26rpx;
  color: #666;
}

.tab-item.active .tab-text {
  color: #fff;
}

/* 帖子列表 */
.posts-scroll {
  height: calc(100vh - 240rpx);
  padding: 20rpx 0;
}

.post-list {
  padding: 0 30rpx;
}

.post-item {
  padding: 30rpx;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 20rpx;
}

.post-avatar {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.avatar-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.post-header {
  margin-left: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.post-author {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
}

.post-tag {
  height: 40rpx;
  border-radius: 1000rpx;
  border: 2rpx solid #999999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4rpx 16rpx;
  margin-top: 8rpx;
}

.tag-text {
  font-size: 24rpx;
  color: #666;
}

.post-content {
  flex: 1;
}

.post-text {
  font-size: 26rpx;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20rpx;
}

.post-image {
  width: 100%;
  height: 200rpx;
  border-radius: 12rpx;
  margin: 20rpx 0;
}

.post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;
}

.post-time {
  font-size: 24rpx;
  color: #999;
}

.post-actions {
  display: flex;
  align-items: center;
}

.action-item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
}

.like-icon,
.comment-icon,
.share-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 8rpx;
}

.action-count {
  font-size: 28rpx;
  font-weight: 400;
  color: #000;
}

/* 加载状态 */
.loading-more,
.no-more {
  padding: 30rpx;
  text-align: center;
}

.loading-text,
.no-more-text {
  font-size: 24rpx;
  color: #999;
}
</style>
